<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>系统级取色器</title>
    <style>
      body {
        /*  background image from https://wallhaven.cc/w/z4ompn */
        background-image: url(./wallhaven-z4ompn.jpg);
        background-size: auto;
      }

      .color-box {
        width: 100px;
        height: 100px;
        border: 1px solid white;
        overflow: hidden;
        border-radius: 4px;
        background-image: url('');
      }

      .color-box::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--color);
      }
    </style>
  </head>

  <body>
    <div class="color-box"></div>
    <button>点击取色</button>
    <script>
      const button = document.querySelector('button')
      const colorBox = document.querySelector('.color-box')

      button.addEventListener('click', async () => {
        if (!window.EyeDropper) {
          alert('你的浏览器不支持 EyeDropper API')
          return
        }

        const dropper = new EyeDropper()
        const result = await dropper.open()
        colorBox.style.setProperty('--color', result.sRGBHex)
      })
    </script>
  </body>
</html>
